<template>
  <div class="app-container"  style="height: 100%;width: 100%">
    <div style="height: 100%;min-width: 10000px"  v-if="$store.state.fileViewShare.fileTree.newChildren&&$store.state.fileViewShare.fileTree.newChildren.some((item)=>{return item.inc_type=='dir'})">
      <file-view-share
      ref="fileViewRef"
      @view="viewFile"
      @download="dowloadFile"
      :file-tree="$store.state.fileViewShare.fileTree"
    />
    </div>
    <div v-else style="height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column">
      <div class="file-button-img-box " v-if="$store.state.fileViewShare.fileTree.newChildren">
        <div class="file-button-img" :class="'file-button-img-'+$store.state.fileViewShare.fileTree.newChildren[0].inc_type" />
      </div>
      <div style="display: flex;margin-top: 16px">
        <el-button size="mini" @click="dowloadFile($store.state.fileViewShare.fileTree.newChildren[0])" type="primary" >{{$t('bs.download')}}</el-button>
        <el-button size="mini" @click="viewFile($store.state.fileViewShare.fileTree.newChildren[0])" type="danger">{{$t('bs.view')}}</el-button>
      </div>
    </div>
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"
               :before-close="()=>showReviewer=false"
               :visible.sync="showReviewer"
               title="预览"
               width="90%"
    >
      <div v-if="viewShowNode&&viewShowNode.href" v-loading="viewLoading" class="viewbox">
        <img v-if="viewShowNode.type=='image'" :src="viewShowNode.href" style="max-height: 100%;max-width: 100%">

        <vue-office-pdf v-if="viewShowNode.type=='pdf'" :options="{lazy:true}" :src="viewShowNode.href" style="flex: 1;" @rendered="rendered" />
        <vue-office-docx v-if="viewShowNode.type=='word'" :src="viewShowNode.href" style="flex: 1;" @rendered="rendered" />
        <vue-office-excel v-if="viewShowNode.type=='excel'" :src="viewShowNode.href" style="flex: 1;" @rendered="rendered" />
        <iframe v-if="viewShowNode.type=='txt'||viewShowNode.type=='text'" :src="viewShowNode.href" style="flex: 1;" />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showReviewer = false">取 消</el-button>
        <el-button type="primary" @click="showReviewer = false">确 定</el-button>
<!--          <el-button type="danger" @click="printFile">打 印</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {downBlobFile, getShareFile, viewBlobFile} from '@/api/common'
import waves from '@/directive/waves' // waves directive
import {parseTime} from '@/utils'
import Pagination from '@/components/Pagination'
import CyTreeSelect from '@/components/CyTreeSelect'
import Template from "@/views/bs/template.vue";
import FileViewShare from "@/views/Knowledge/fileViewShare.vue";
import FileView from "@/views/Knowledge/fileView.vue";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from '@vue-office/excel'
const cityOptions = ['文本', '列表', '长文本']
export default {
  name: 'SlStation',
  components: {VueOfficeExcel,VueOfficeDocx, VueOfficePdf, FileView, FileViewShare, Template, CyTreeSelect, Pagination},
  directives: {waves},
  data() {
    return {
      showReviewer: false,
      viewLoading:false,
      viewShowNode: null,
      file_id:"",
      historyList:[]
    }
  },

  created() {

    this.file_id = this.$route.query.id

  },
  mounted() {
      this.shareFile()
  },
  methods: {
    printFile(){

    },
    viewFile(node) {
      console.log(node)
      const viewTypes = ['word', 'excel', 'pdf', 'image', 'txt', 'text']
      if (viewTypes.indexOf(node.inc_type) == -1) {
        this.$message.warning('此文件不支持预览')
        return
      }
      // this.viewLoading=true;
      // 记录路径
      var has = this.$store.state.fileView.recentViews.filter(item => item.id == node.id)
      console.log('已经存在的', has)
      if (!has || has.length == 0) {
        if (this.$store.state.fileView.recentViews.length >= 10) {
          this.$store.state.fileView.recentViews = this.$store.state.fileView.recentViews.splice(9)
        }
        this.$store.state.fileView.recentViews.unshift({ id: node.id, name: node.name, path: _.cloneDeep(this.$store.state.fileView.fileTree) })
      }
      this.viewShowNode = { type: node.inc_type, href: '' }
      viewBlobFile({ file_id: node.id }).then((response) => {
        const blob = response
        if (blob && blob.size === 0) {
          this.$message.error('内容为空，无法预览')
          this.viewLoading = false
          return
        }

        // 兼容一下 入参不是 File Blob 类型情况
        var binaryData = []
        binaryData.push(response)
        this.viewShowNode.href = window.URL.createObjectURL(new Blob(binaryData))
        this.showReviewer = true
      })
    },
    dowloadFile(node) {
      downBlobFile({ file_id: node.id }, node.name)
    },
    shareFile(){
      getShareFile({id:this.file_id}).then((res)=>{

        if(res.data[0]){
          this.mergeChildren(res.data[0])
          this.$store.state.fileViewShare.fileTree=res.data[0]
          console.log('文件',this.$store.state.fileViewShare.fileTree)
        }
      })
    },
    mergeChildren(tree) {
      if (!tree.children) {
        tree['children'] = []
      }
      if (!tree.filelist) {
        tree['filelist'] = []
      }

      tree['newChildren'] = tree.children.concat(tree.filelist)
      tree['selectKey'] = null
      for (var i = 0; i < tree.children.length; i++) {
        this.mergeChildren(tree.children[i])
      }
    },

  }
}
</script>
<style scoped="scoped" type="scss">
.pagination-container {
  padding: 0px;
  padding-bottom: 16px;
}
.file-button-img-dir {
  background-position: 0px -50px;
}

.file-button-img-image {
  background-position: 0px -250px;
}

.file-button-img-music {
  background-position: 0px -350px;
}

.file-button-img-vedio {
  background-position: 0px -400px;
}

.file-button-img-txt {
  background-position: 0px -450px;
}

.file-button-img-pdf {
  background-position: 0px -500px;
}

.file-button-img-gw {
  background-position: 0px -550px;
}

.file-button-img-world {
  background-position: 0px -1500px;
}

.file-button-img-exe {
  background-position: 0px -900px;
}

.file-button-img-zip {
  background-position: 0px -1150px;
}

.file-button-img-ppt {
  background-position: 0px -1400px;
}

.file-button-img-excel {
  background-position: 0px -1450px;
}
.hoverbutton {
  width: 70px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  border-radius: 3px;
}

.hoverbutton:hover {
  border: 1px solid #999999;
}

.setcheckbox .el-checkbox {
  margin-bottom: 10px;
}

.searchform .el-form-item {
  margin-bottom: 0px;
  min-width: 280px;
}
.file-button-img-box {
  width: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-button-img-excel {
  background-position: 0px -1800px;
}
.file-button-img-excel {
  background-position: 0px -1850px;
}
.file-button-img-excel {
  background-position: 0px -1900px;
}
.file-button-img-DWI {
  background-position: 0px -1800px;
}
.file-button-img-EPM {
  background-position: 0px -1850px;
}
.file-button-img-SPM {
  background-position: 0px -1900px;
}
.file-button-img {
  width: 16px;
  height: 16px;
  background: url('/static/icons-small.png') no-repeat;
  zoom: 200%;
}
.el-card__body {
  padding: 10px !important;
}
</style>

